<template>
	<view>
		<view class="flexItemMain1 ">
			<view class="input-box">
				<image class="search" @click="toSearch" src="/static/newimg/icon_02.png" mode="widthFix"></image>
				<input class="search-text" placeholder="搜索..." @input="onKeyInput" type="text" v-model="search" placeholder-style="color: #D2D2D2;"
				 @click="toSearch" />
			</view>
		</view>
		<view class="userList">
			<view class="item" v-for="(item, index) in peopleData" :key="index" @click="checkedFun(item)">
				<view class="pitchOn_img">
					<image src="../../static/img/isPitchOn_bg.png" v-if="item.checked"></image>
					<image src="../../static/img/pitchOn_bg.png" v-else></image>
				</view>
				<view class="my_avatar">
					<image :src="item.avatar" mode=""></image>
				</view>
				<view class="my_name">
					{{item.nick}}
				</view>
			</view>
		</view>
		<view class="c_bottom">
			<view class="c_b_button" @click="deleteUser">{{checkedNumber?"选中"+checkedNumber+"人确认踢出":"请选择"}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				search: '',
				peopleData: [],
				groupId: null,
				myID: null,
				checkedNumber: 0,
				oldList: []
			}
		},
		onLoad(options) {
			this.groupId = options.groupId
			this.myID = JSON.parse(uni.getStorageSync('userInfo')).id
			this.getGroupPeople()
		},
		methods: {
			deleteUser(){
				if(!this.checkedNumber) {
					uni.showToast({
						icon:"none",
						title:"请先选择用户",
					})
					return;
				}
				let userIds = this.peopleData.filter(item => {
					return item.checked
				})
				let myUserId = [];
				userIds.forEach(item => {
					myUserId.push(item.userID)
				})
				let data = {
					group_id:this.groupId,
					user_id:myUserId
				}
				// console.log(data)
				this.$utils.postrequest('/api/tim/kicking_group_x',data,res=>{
					// console.log(res)
					if(res.code == 200){
						uni.showToast({
							icon:"none",
							title:"移除成功",
							success:res=>{
								uni.navigateBack({
									delta:1
								})
							}
						})
					}else {
						uni.showToast({
							icon:"none",
							title:res.message,
						})
					}
				})
			},
			toSearch() {
				if(this.search) {
					this.oldList = this.peopleData;
					this.peopleData = this.peopleData.filter(item => {
						return item.nick.indexOf(this.search) != -1;
					})
					this.checkedNumber = this.peopleData.filter(item=>{
						return item.checked;
					}).length;
				}else {
					this.peopleData = this.oldList;
					this.checkedNumber = this.peopleData.filter(item=>{
						return item.checked;
					}).length;
				}
				this.$forceUpdate()
			},
			onKeyInput(event) {
				this.search = event.target.value
				if(this.search){
					this.toSearch()
				}else {
					this.peopleData = this.oldList;
					this.checkedNumber = this.peopleData.filter(item=>{
						return item.checked;
					}).length;
					this.$forceUpdate()
				}
			},
			checkedFun(item) {
				item.checked = !item.checked;
				this.checkedNumber = this.peopleData.filter(item=>{
					return item.checked;
				}).length;
				this.$forceUpdate()
			},
			// 获取成员列表
			getGroupPeople() {
				let that = this;
				let promise = this.tim.getGroupMemberList({
					groupID: this.groupId,
					count: 999,
					offset: 0
				}); // 从0开始拉取30个群成员
				promise.then(function(imResponse) {
					// console.log(imResponse)
					for (let i = 0; i < imResponse.data.memberList.length; i++) {
						if (imResponse.data.memberList[i].avatar.indexOf("[") > -1) {
							imResponse.data.memberList[i].avatar = JSON.parse(imResponse.data.memberList[i].avatar)[0]
						} else if (imResponse.data.memberList[i].avatar.indexOf(",") > -1) {
							imResponse.data.memberList[i].avatar = JSON.parse(imResponse.data.memberList[i].avatar)[0]
						} else if (imResponse.data.memberList[i].avatar == "") {
							// imResponse.data.memberList.splice(i,1);
							that.$utils.postrequest("/api/getuser", {
								user_id: imResponse.data.memberList[i].userID
							}, function(res) {
								if (res.code == 200) {
									imResponse.data.memberList[i].avatar = res.data.avatar
									imResponse.data.memberList[i].nick = res.data.nickname
								}
							})
						}
					}
					imResponse.data.memberList.forEach((e, i) => {
						e.isLeader = 0
						if (e.userID == that.groupLeaderId) {
							e.isLeader = 1
						}
					})
					that.peopleData = imResponse.data.memberList.filter((item)=>{
						return item.userID != that.myID
					}); // 群成员列表
					that.peopleData.forEach(item=>{
						item["checked"]= false;
					})
					that.oldList = that.peopleData;
					// console.log("群成员列表")
					// console.log(that.peopleData)
				}).catch(function(imError) {
					console.warn('getGroupMemberList error:', imError);
				});
			},
		}
	}
</script>

<style scoped>
	.flexItemMain1 {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 38rpx 40rpx 30rpx 27rpx;
		padding: 20rpx;
		border-radius: 10rpx;
		background: #F9F9F9;
	}

	.input-box {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.search-text {
		width: 360rpx;
		/* height: 69rpx; */
		flex: auto;
		text-align: left;
		font-size: 24rpx;
		font-family: PingFang SC;

		color: #7A6EB3;
		line-height: 43rpx;
		background: #F9F9F9;
	}

	.screen {
		flex: none;
		width: 33rpx;
		height: 33rpx;
		/* float: right; */
	}

	.search {
		/* margin-left: 26rpx; */
		width: 24rpx;
		/* height: 40rpx; */
		margin-right: 26rpx;
	}

	.screen-text {
		margin-left: 8rpx;
		font-size: 24rpx;
		font-family: PingFang SC;

		color: #7A6EB3;
		line-height: 43rpx;
		float: right;
	}

	.userList {
		width: 100%;
		box-sizing: border-box;
		padding-left: 30rpx;
		padding-bottom: 160rpx;
	}

	.item {
		width: 100%;
		height: 50px;
		margin-bottom: 16rpx;
		display: flex;
		align-items: center;

	}

	.pitchOn_img {
		width: 46rpx;
		height: 46rpx;
		margin-right: 22rpx;
	}

	.pitchOn_img image {
		width: 100%;
		height: 100%;
	}

	.my_avatar {
		width: 50px;
		height: 50px;
		border-radius: 10rpx;
		overflow: hidden;
		margin-right: 30rpx;
	}

	.my_avatar image {
		width: 100%;
		height: 100%;
	}

	.my_name {
		flex: 1;
		height: 100%;
		box-sizing: border-box;
		border-bottom: 1rpx solid #E9E9E9;
		display: block;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.c_bottom {
		width: 100%;
		height: 157rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: center;
	}
	.c_bottom .c_b_button {
		width: 446rpx;
		height: 106rpx;
		background: #7564FE;
		border-radius: 53rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
